<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../react18/react.development.js"></script>
    <script src="../../react18/react-dom.development.js"></script>
    <script src="../../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      //
      /* class App extends React.Component {
        render() {
          return (
            <div>
              <input type="text" id="ipt" />
              <button onClick={this.getValue}>打印输入</button>
            </div>
          );
        }

          //  不使用ref方法 直接获取input属性的value值

        getValue = () => {
          const oIpt = document.querySelector("#ipt");
          console.log(oIpt.value);
        };
      } */
      //   class Child extends React.Component {
      //     render() {
      //       return <h1>hello Child</h1>;
      //     }
      //   }
      //   class App extends React.Component {
      //     render() {
      //       return (
      //         <div>
      //           <input type="text" ref="iptEle" />
      //           <Child ref="childComp" />
      //           <button onClick={this.getValue}>点击打印输入内容</button>
      //         </div>
      //       );
      //     }
      //     getValue = () => {
      //       console.log(this.refs.iptEle.value);
      //     };
      //   }

      /*
        组件的refs属性：
            react提供了一个方式，允许我们访问DOM节点或在子组件。
            如果ref属性设置在了DOM节点上，则我们获取的是这个真实DOM
            如果ref属性设置在了子组件上，则我们获取的是当前子组件的组件实例
            我们可以在组件是咧上通过refs属性获取到所有的通过ref获取的内容
      */

      class App extends React.Component {
        render() {
          return (
            <div>
              <h1>当input失去焦点的时候,打印元素中的内容</h1>
              <input type="text" onBlur={this.iptBlur} />
            </div>
          );
        }

        iptBlur = (e) => {
          console.log(etarget.value);
        };
      }
      /* 
        不使用ref的情况：
            需求：当某个元素上发生事件的时候，想要获取当前元素的真是DOM
            我们只需要通过event事件对象中的target属性即可获取
      */
      ReactDOM.createRoot(document.getElementById("app")).render(<App />);
    </script>
  </body>
</html>
